<template>
    <header>
        <p>商家列表</p>
    </header>
    <template v-for="item in businessList">
        <!-- 商家列表部分 -->
        <div class="business" @click="navigatorToBusinessInfo(item.id)">
            <div class="businessItem">
                <div class="businessImg">
                    <div v-show="item.quantity>0" class="businessImgQuantity">{{item.quantity}}</div>
                    <img  :src="`${item.businessImg}`">
                </div>
                <div class="business-info">
                    <h3>{{item.businessName}}</h3>
                    <p>&#165;{{ item.starPrice }}| &#165;{{ item.deliveryPrice }}配送</p>
                    <p>{{item.businessExplain}}</p>
                </div>
            </div>
        </div>
    </template>
    <div style="height: 100px"/>
    <MyFooter/>
</template>

<script setup lang="ts">
import MyFooter from "../components/Footer.vue";
import {useRoute} from "vue-router";
import {onMounted, reactive,ref} from "vue";
import {BusinessQueryDTO, BusinessVO} from "../type/business";
import {getRecommendBusinessAPI, getTypeBusinessAPI} from "../service/business.ts";
import router from "../router";
import {CartVO} from "../type/cart.ts";
import {listCartAPI} from "../service/cart.ts";
const route = useRoute()
//商家列表
const businessList = ref<BusinessVO[]>([]);
const cartList = ref<CartVO[]>([]);
const queryForm = ref<BusinessQueryDTO>({
    businessAddress:"",
    businessName:""
})
onMounted(async () => {
    //获取全部购物车
    const cart_res =await listCartAPI();
    cartList.value = cart_res.data;
    //判断是否哪个组件跳转过来的
    if (route.path.includes('/businessList')) {
        //获取商家列表
        const res = await getRecommendBusinessAPI(queryForm.value);
        businessList.value = res.data;
    } else {
        const orderTypeId = route.params.id as number
        //根据分类id获取商家列表
        const res = await getTypeBusinessAPI(orderTypeId);
        businessList.value = res.data;
    }
    console.log(businessList.value)
    //设置初始数量
    if(cartList.value.length>0){
        cartList.value .forEach(cart => {
            // 找到 productList 中对应的商品
            let b = businessList.value.find(business => cart.businessVO.id === business.id);
            if (b) {
                // 更新商品的数量
                b.quantity = cart.totalQuantity;
            }
        });
    }
})

//跳转商家页面
const navigatorToBusinessInfo = (id:number)=>{
    router.push({path:'businessInfo/'+id})
}

</script>

<style scoped>
/****************** header部分 ******************/
header{
    width: 100%;
    height: 12vw;
    background-color: #0097FF;
    color: #fff;
    font-size: 4.8vw;

    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;

    display: flex;
    justify-content: center;
    align-items: center;
}
/****************** 商家列表部分 ******************/
.business{
    width: 100%;
    margin-top: 10vw;
}
.business .businessItem{
    width: 100%;
    box-sizing: border-box;
    padding: 2.5vw;
    border-bottom: solid 1px #DDD;
    user-select: none;
    cursor: pointer;

    display: flex;
    align-items: center;
}
.business .businessItem .businessImg{
    /*这里设置为相当定位，成为businessImgQuantity元素的父元素*/
    position: relative;
}
.business .businessItem .businessSpot{
    position: absolute;
    top: -10px;
    right: -10px;
    width: 20px;
    height: 20px;
    background-color: red;
    border-radius: 50%;
}
.business .businessItem .businessImg img{
    width: 20vw;
    height: 20vw;
}
.business .businessItem .businessImg .businessImgQuantity{
    width: 5vw;
    height: 5vw;
    background-color: red;
    color: #fff;
    font-size: 3.6vw;
    border-radius: 2.5vw;

    display: flex;
    justify-content: center;
    align-items: center;

    /*设置成绝对定位，不占文档流空间*/
    position: absolute;
    right: -1.5vw;
    top: -1.5vw;
}
.business .businessItem .business-info{
    margin-left: 3vw;
}
.business .businessItem .business-info h3{
    font-size: 3.8vw;
    color: #555;
}
.business .businessItem .business-info p{
    font-size: 3vw;
    color: #888;
    margin-top: 2vw;
}
</style>
